<template>
  <div class="home">
    <div ref='editor'></div>
  </div>
</template>

<script>
// 引入 wangEditor
import E from 'wangeditor'
// import cos and init
import COS from 'cos-js-sdk-v5'
const cos = new COS({
  SecretId: 'AKIDBBwQfdKkvrZ2E9oBIAl6AyVljRu74k9H',
  SecretKey: 'sUrxmJZZIkwtZ0B5j5B0Zrsc5IFwNXKq'
})

export default {
  name: 'TextAreaEditor',
  props: {
    editorData: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
    //   editor: null,
      editorDataNew: ''
    }
  },

  mounted () {
    this.setEditor()
  },

  watch: {
    editorData: function (val) {
      this.editor.txt.html(val)
    }
  },

  methods: {
    setEditor () {
      // attention! <div ref='editor'></div> can't use id
      this.editor = new E(this.$refs.editor)

      this.editor.config.menus = [
        'bold',
        'italic',
        'underline',
        'strikeThrough',
        'list',
        'quote',
        'code',
        'image',
        'link'
      ]

      this.editor.config.debug = true

      // 配置层级，默认1000
      this.editor.config.zIndex = 500

      // 配置高度
      this.editor.config.height = 200

      this.editor.config.placeholder = ''

      // 隐藏网络上传
      this.editor.config.showLinkImg = false

      // 自定义上传图片事件
      this.editor.config.customUploadImg = function (resultFiles, insertImgFn) {
        console.log(resultFiles)
        // resultFiles 是 input 中选中的文件列表
        // insertImgFn 是获取图片 url 后，插入到编辑器的方法

        cos.putObject({
          Bucket: 'liu-1307084383', /* 存储桶名字 */
          Region: 'ap-nanjing', /* 存储桶所在地域 */
          Key: resultFiles[0].name, /* 文件名 */
          StorageClass: 'STANDARD',
          Body: resultFiles[0], // 图片文件对象
          onProgress: function (progressData) {
            //   console.log(JSON.stringify(progressData))
          }
        }
        ).then(function (res) {
        //   upload success :insert url to editor
          insertImgFn(`https:${res.Location}`)
        })
      }

      // 自定义检查插入的链接
      this.editor.config.linkCheck = function (text, link) {
        // 富文本框链接颜色问题和插入代码不换行问题=================================================
        // 1. 返回 true ，说明检查通过
        // return true
      }

      // 配置 onchange 回调函数，将数据同步到 vue 中
      this.editor.config.onchange = (newHtml) => {
        this.editorDataNew = newHtml
        this.$emit('update:editorData', this.editorDataNew)

        // // 失焦事件
        this.editor.config.onblur = () => {
        //   console.log('失焦')
          this.$emit('blur', true)
        }
      }

      // 创建编辑器
      this.editor.create()
    }
  },

  beforeDestroy () {
    // 调用销毁 API 对当前编辑器实例进行销毁
    this.editor.destroy()
    this.editor = null
  }
}
</script>

<style lang="scss" scoped>

  ::deep .w-e-text-container{
  height: 200px;

  }
</style>
